<template>
	<view class="content">
		<listHead :only="only" :title='written'></listHead>
		<view class="ListOfPatients_TP">
			<view class="ListOfPatients_tab">
				<view :class="['tab-item', currentTabIndex==index ?'active':'']" v-for="(item,index) in list1"
					:key="index" @tap="getTabsClick(item,index)">
					{{item.name}}
				</view>
			</view>
			<u-radio-group v-model="value" placement="row" activeColor="#7AD9DF !important"
				inactiveColor="#B0E9EC  !important">
				<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1" :key="index"
					:label="item.name" :name="item.name" :class="value==item.name?'clao':'clat'"
					@change="radioChange(item.name)">
				</u-radio>
			</u-radio-group>
		</view>
		<view class="ListOfPatients_BT">
			<view class="Patients_BT">
				<view class="ListOfPatientsBT_item" v-for="(item,index) in list" :key='index'
					style="margin-bottom: 10px;">
					<u-form labelAlign="right">
						<u-form-item prop="name" style="padding: 0 6px;">
							<view class="view-item">
								<text class="ListOfPatientsBTItem_textT">{{item.bedid}}</text>
								<view class="ListOfPatientsBTItem_text">
									{{item.pname}}
								</view>
							</view>
							<view class="view-item1">
								<view class="ListOfPatientsBTItem_textT textT1">
									{{item.mrn}}
								</view>
								<view class="ListOfPatientsBTItem_Right">
									<view class="Right-left" style="margin-right: 10px;">
										{{item.room}}
									</view>
									<view class="Right-left Right-color">
										{{item.cdo}}
									</view>
								</view>
							</view>
							<view class="Iage"></view>
						</u-form-item>
					</u-form>
					<view class="ListOfPatientsBT_center">
						<view class="BT_center_remark">{{item.opername}}</view>
						<view class="BT_center">
							<text class="text">{{item.stay == 'I'?'门诊':'住院'}}</text>
							<view class="BT_center_hosder">
								<text v-if="item.operdept.length>5">{{item.operdept.slice(0,4)}}</text>
								<text v-else>{{item.operdept}}</text>
								<text style="margin-left: 5px;">{{item.dr}}</text>
							</view>
							<text class="BT_date">{{item.plandate}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import listHead from '../../components/html/listHead.vue'
	import {
		mapMutations,
		mapState
	} from "vuex";
	import {
		Oper_Get_Operlist
	} from '../../api/user.js'
	export default {
		components: {
			listHead
		},
		data() {
			return {
				only: false,
				written: '',
				list1: [{
					name: '本病区',
				}, {
					name: '全部',
				}],
				currentTabIndex: '0',
				windowWidth: '',
				radiolist1: [{
						name: '当日',
						disabled: false,
					},
					{
						name: '次日',
						disabled: false,
					},
					{
						name: '次日以后',
						disabled: false,
					}
				],
				value: '当日',
				list: [],
				TabsValue: 0
			}
		},
		computed: {
			...mapState('user', ['userInfo', 'passObj', 'scanningArray', 'adminValue'])
		},
		onLoad() {
			let _this = this
			uni.getSystemInfo({
				success: function(res) {
					_this.windowWidth = res.windowWidth;
				}
			});
			_this.Oper_Get_OperlistFun()
		},
		mounted() {
			this.written = uni.getStorageSync('adminValue')
		},
		methods: {
			// TabsChange(e) {
			// 	this.currentTabIndex = e.index
			// 	this.Oper_Get_OperlistFun()
			// },
			radioChange(e) {
				this.value = e
				this.Oper_Get_OperlistFun()
			},
			getTabsClick(data, num) {
				this.currentTabIndex = num
				this.Oper_Get_OperlistFun()
			},
			async Oper_Get_OperlistFun() {
				try {
					uni.showLoading({
						title: '加载中...', //显示的文字
						duration: 5000, //显示多少时间，默认1500毫秒
						icon: "loading", //自定义显示的图标，默认成功success，错误error,加载loading，不显示图标是none
						mask: true
					})
					const user = uni.getStorageSync('userInfo')
					const data = {
						HosKind: user.hoscode,
						sType: this.currentTabIndex == 0 ? '本病区' : '全部',
						sKind: this.value,
						sOperdept: user.HosKind,
						sOperJp: user.sPassword
					}
					const res = await this.$http.Oper_Get_Operlist(data)
					if (res) {
						let att = res.some(item => {
							return item.result == ''
						})
						console.log(att);
						if (att) {
							this.list = []
						} else {
							this.list = res
						}
						this.$nextTick(() => {
							uni.hideLoading();
						})
					}
				} catch (e) {
					this.list = []
					//TODO handle the exception
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		overflow-y: hidden;
	}

	.ListOfPatients_TP {
		padding: 10px 0px 0px 0px;
		background: #FFFFFF;
		z-index: 9;

		// display: flex;
		// justify-content: space-between;
		.ListOfPatients_tab {
			display: flex;

			.tab-item {
				flex-shrink: 0;
				padding: 0 0 24rpx 0;
				position: relative;
				transition: all 0.2s linear;
				width: 50%;
				text-align: center;
				color: #1d8e95;

				&::after {
					transition: all 0.2s linear;
					transform: translateX(-50%) scaleX(0);
					content: '';
					width: 100%;
					position: absolute;
					left: 50%;
					bottom: 10rpx;
					border-bottom: 6rpx solid #7AD9DF;
					border-radius: 4rpx;
				}

				&.active {
					color: #21767b;
					font-weight: bold;

					&::after {
						content: '';
						width: 100%;
						position: absolute;
						left: 50%;
						transform: translateX(-50%) scaleX(1);
						bottom: 10rpx;
						border-bottom: 6rpx solid #7AD9DF;
					}
				}
			}
		}

	}


	.ListOfPatients_BT {
		// width: 100%;
		// height: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		// padding-top: 10px;
		padding: 10px 10px 10px;
		height: calc(100% - 175px);
		overflow-y: scroll;

		.Patients_BT {
			width: 100%;
			// height: 100%;
		}

		.ListOfPatientsBT_item {
			width: 100%;
			min-height: 50px;
			background: #B0E9EC;
			border-radius: 6px;
			padding-bottom: 7px;
			position: relative;

			&:last-child {
				margin-bottom: 0 !important;
			}

			.view-item {
				width: 50%;
				display: flex;
				align-items: center;
				z-index: 9;
			}

			.view-item1 {
				display: flex;
				align-items: center;
				z-index: 9;
			}

			.ListOfPatientsBTItem_text {
				font-size: 16px;
				font-family: SourceHanSansCN-Medium, SourceHanSansCN;
				font-weight: 500;
				color: #FF4D65;
				line-height: 24px;
				text-align: right;
			}

			.ListOfPatientsBTItem_textT {
				width: 50%;
				font-size: 16px;
				font-family: SourceHanSansCN-Medium, SourceHanSansCN;
				font-weight: 500;
				color: #333333;
				line-height: 24px;
				z-index: 9;
			}

			.textT1 {
				padding-right: 15px;
			}

			.ListOfPatientsBTItem_Right {
				width: 50%;
				display: flex;
				justify-content: right;
				align-items: center;

				.Right-left {
					width: 20px;
					height: 20px;
					background: #FF6E91;
					box-shadow: 0px 0px 2px 0px #FF6E91;
					border-radius: 50%;
					font-size: 14px;
					font-family: SourceHanSansCN-Medium, SourceHanSansCN;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 21px;
					text-align: center;
				}

				.Right-color {
					background: #FF78C1 !important;
					box-shadow: 0px 0px 2px 0px #E65DA7 !important;
				}
			}

			.Iage {
				width: 100% !important;
				height: 50% !important;
				position: absolute;
				top: -1px;
				right: 0;
				background-size: auto !important;
				background-position: 100% 0% !important;
				background: url("../../assets/image/sjd.png") no-repeat;
				z-index: 1;
			}
		}

		.ListOfPatientsBT_itemTwo {
			width: 100%;
			min-height: 50px;
			background: #B0E9EC;
			border-radius: 6px;
			position: relative;
			display: flex;
			justify-content: space-between;

			.ListOfPatientsBT_itemTwo_left {
				width: 190px;
				min-height: 50px;
				line-height: 50px;
				display: flex;
				padding: 0 10px;
				// justify-content: space-around;

			}

			.ListOfPatientsBT_itemTwo_right {
				.ListOfPatientsBT_itemTwo_rightSJ {
					position: absolute;
					top: 4px;
					right: 0;
					width: 161px;
					height: 30px;
					z-index: 1;
				}

				.ZXImg {
					position: absolute;
					top: 0;
					right: 0;
					width: 182px !important;
					height: 40px !important;
				}

			}
		}

		.ListOfPatientsBT_center {
			background: #F6FEFF;
			border-radius: 6px;
			opacity: 0.95;
			margin: -3px 6px 0;
			padding: 10px 10px 5px;

			.BT_center_remark {
				font-size: 16px;
				font-family: SourceHanSansCN-Medium, SourceHanSansCN;
				font-weight: 500;
				color: #086168;
				line-height: 24px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.BT_center {
				display: flex;
				align-items: center;

				.text {
					font-size: 14px;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #999999;
					line-height: 21px;
					width: 15%;
				}

				.BT_center_hosder {
					display: flex;
					align-items: center;
					font-size: 14px;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #333333;
					line-height: 21px;
					width: 40%;
					// justify-content: right;
				}

				.BT_date {
					width: 55%;
					text-align: right;
					font-size: 14px;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #333333;
					line-height: 21px;
				}

			}
		}
	}

	::v-deep .u-tabs__wrapper__nav__line {
		background: #7AD9DF !important;
	}

	::v-deep .u-tabs__wrapper__nav__item__text {
		font-size: 16px;
		font-family: SourceHanSansCN-Medium, SourceHanSansCN;
		font-weight: 500;
		color: #2F7378 !important;
		line-height: 24px;
	}

	::v-deep .u-radio-group--row {
		justify-content: space-around;
	}

	::v-deep .u-radio__icon-wrap--circle {
		width: 26px !important;
		height: 26px !important;
		background-color: #B0E9EC !important;
		// border-color:  #7AD9DF  !important;
	}

	::v-deep .u-radio-group--row {
		margin-top: 10px;
	}

	.clao ::v-deep {
		.u-icon__icon {
			border-radius: 50%;
			background: #FEFF87;
			color: #FEFF87 !important;
			width: 13px;
			height: 13px;
		}
	}

	.clat ::v-deep {
		.u-icon__icon {
			border-radius: 50%;
			background: #FFFFFF;
			width: 13px;
			height: 13px;
		}
	}

	::v-deep .u-form-item__body {
		margin: -5px 0 0 0;

	}

	::v-deep .u-form-item__body__right__content__slot {
		justify-content: space-between;
	}
</style>
